<template>
  <div>
    <n-button @click="click">click</n-button>
    <div>{{ formRefs.children }}</div>
    <div>
      <div v-for="child in formModel.children">
        {{ child.name }}
        <div v-for="fren in child.friends">
          {{ 'friend :' + fren.name }}
        </div>
      </div>
    </div>
    <ocean :use="NForm">
      <ocean :use="name" v-model:value="formModel.name"></ocean>
      <ocean :use="age" v-model:value="formModel.age"></ocean>
      <!-- <div v-for="child in formModel.children"> -->
      <!-- <ocean :use="childName" :model="child"></ocean> -->
      <!-- <div :style="getChild(child)"></div> -->
      <!-- </div> -->
    </ocean>
  </div>
</template>
<script lang="ts" setup>
import { ref, isRef, isReactive, inject, watch, reactive, toRef, Ref, toRefs, ToRefs } from "vue";
import { NTag, NCard, NInput, NButton, useMessage, NSelect, NForm } from "naive-ui";
import type { DefineComponent } from "vue";
import OFormItem from '@/ocean/components/FormItem.vue'
import Ocean from "@/ocean/components/Ocean.vue";


type vueComponent = DefineComponent<{}, {}, any>

interface OceanComponentImpl {
  oceanComponent: vueComponent,
  isOceanComponent: Boolean,
}

interface FormItemImpl extends OceanComponentImpl {
  component: vueComponent,
  options?: Array<any>,
}


class OceanComponent {
  oceanComponent: vueComponent;
  isOceanComponent: Boolean = true;
  constructor(oceanComponent: vueComponent) {
    this.oceanComponent = oceanComponent;
  }
}

class FormItem extends OceanComponent {
  component: vueComponent;
  label: String;
  options: Array<any> = [];
  constructor(component: vueComponent, label?: string) {
    super(OFormItem);
    this.component = component;

    if (label) {
      this.label = label;
    }
  }
}

class FormModel {
  [x: string]: any;
  constructor(model) {
    for (let k in model) {
      this[k] = model[k]
    }
  }

  setValue(modelValue) {
    for (let k in this) {
      this[k] = modelValue[k]
    }
  }
}


class Form extends OceanComponent {
  model: FormModel;
  constructor(model: FormModel) {
    super(NForm);
    this.model = model;
    console.log(this)
  }
}


class FormArray {
  array: Ref<any[]>;
  items: Array<any>;
  constructor(array: Ref<any[]>) {
    this.array = array;
  }

  addItem(item) {
    this.items.push(item);
  }
}


const useFormModel = (model): Array<any> => {
  const formModel = reactive(new FormModel(model))
  const formRefs = toRefs(formModel);
  return [formModel, formRefs];
}

const useForm = (model): Array<any> => {
  const [formModel, formRefs] = useFormModel(model);
  const form = new Form(formModel);
  return [formModel, formRefs, form]
}

let [formModel, formRefs, form] = useForm({
  name: 'lizhiyuan',
  age: 12,
  children: [
    { name: 'fuck' }
  ]
})


watch(() => formModel, (v) => {
  console.log(v)
}, { deep: true })


let name: FormItemImpl = new FormItem(NInput, '姓名');
let age: FormItemImpl = new FormItem(NInput, '年龄');


/*


let [formModel , formRefs] = useFormModel({
  name : 'lizhiyuan',
  age : 50,
  children:[],
})

let form = useForm(formModel)
    form.item(NInput,'name','姓名')
    form.item(NInput,'age','年龄')

let children = form.array('children')
    children.item(NInput,'name','子女姓名')
    children.item(NInput,'age','子女年龄')

let friends = children.array('friends')
    friends.item(NInput,'name','朋友姓名')

*/


let click = () => {
  formModel.setValue({
    children: [
      { name: 'bobo', friends: [{ name: 'heheda' }] },
      { name: 'kitty' },
    ]
  })
}

let getChild = (child) => {
  console.log(child)
  return { color: 'red' }
}


// type P = { name: string, age: number }

// function fn<T extends P>(person: T): (T) {
//   let p: T = person;
//   return p;
// }

// type T = { id: number } & P;


// let person: P = fn<T>({ name: '111', age: 1, id: 1 });

</script>
<style lang="scss" scoped>
.form {
  // width: 100%;
}

.rect {
  padding: 10px;
  width: 100%;
  margin-top: 20px;

  @include themeify {
    background: theme("bg_base");
    border: 1px solid theme('border');
    border-radius: theme('radio');
  }
}
</style>
